<template>
  <div>
    <!-- 导航栏 -->
    <!-- 搜索栏 -->
    <div class="searchBody">
      <el-form :inline="true" :model="searchBody" class="demo-form-inline">
        <el-form-item label="选择专业：" class="select">
          <el-input
            v-model="searchBody.majorName"
            placeholder="输入专业名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择班级：" class="select">
          <el-input
            v-model="searchBody.className"
            placeholder="输入班级名称"
          ></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" @click="getStudentList()">查询</el-button>
          <el-button type="primary" @click="dialogFormVisible = true"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div>
      <el-table :data="tableData" border style="width: 100%" class="table">
        <el-table-column
          type="index"
          width="100px"
          label="序号"
        ></el-table-column>
        <el-table-column prop="studentName" label="姓名" width="100px">
        </el-table-column>
        <el-table-column prop="studentId" label="学号" width="150px">
        </el-table-column>
        <el-table-column prop="majorName" label="专业" width="150px">
        </el-table-column>
        <el-table-column prop="className" label="班级" width="200px">
        </el-table-column>
        <el-table-column prop="studentPassword" label="密码" width="200px">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" @click="openUpdateStudent(scope.row)"
              >修改信息</el-button
            >
            <el-button type="danger" @click="delStudent(scope.row)"
              >删除记录</el-button
            >
            <el-button type="success">查询签到历史</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        page-size="5"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <!-- 新增学生 -->
    <div>
      <el-dialog title="新增学生" :visible.sync="dialogFormVisible">
        <el-form
          :model="studentAddBody"
          ref="studentAddRef"
          label-width="80px"
          class="demo-dynamic"
        >
          <el-form-item
            prop="studentId"
            label="学号"
            :rules="[
              { required: true, message: '请输入学号', trigger: 'blur' },
            ]"
          >
            <el-input v-model="studentAddBody.studentId"></el-input>
          </el-form-item>
          <el-form-item
            prop="studentName"
            label="学生姓名"
            :rules="[
              { required: true, message: '请输入学生姓名', trigger: 'blur' },
            ]"
          >
            <el-input v-model="studentAddBody.studentName"></el-input>
          </el-form-item>
          <el-form-item
            prop="majorId"
            label="专业ID"
            :rules="[
              { required: true, message: '请输入专业ID', trigger: 'blur' },
            ]"
          >
            <el-input v-model="studentAddBody.majorId"></el-input>
          </el-form-item>
          <el-form-item
            prop="classId"
            label="班级ID"
            :rules="[
              { required: true, message: '请输入班级ID', trigger: 'blur' },
            ]"
          >
            <el-input v-model="studentAddBody.classId"></el-input>
          </el-form-item>
          <el-form-item
            prop="studentPassword"
            label="登陆密码"
            :rules="[
              { required: true, message: '请输入登录密码', trigger: 'blur' },
            ]"
          >
            <el-input v-model="studentAddBody.studentPassword"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addStudent">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改学生 -->
      <el-dialog title="修改信息" :visible.sync="updateDialogFormVisible">
        <el-form
          :model="updateObj"
          ref="studentUpdateRef"
          label-width="80px"
          class="demo-dynamic"
        >
          <el-form-item
            prop="studentId"
            label="学号"
            :rules="[
              { required: true, message: '请输入学号', trigger: 'blur' },
            ]"
          >
            <el-input v-model="updateObj.studentId"></el-input>
          </el-form-item>
          <el-form-item
            prop="studentName"
            label="学生姓名"
            :rules="[
              { required: true, message: '请输入学生姓名', trigger: 'blur' },
            ]"
          >
            <el-input v-model="updateObj.studentName"></el-input>
          </el-form-item>
          <el-form-item
            prop="majorId"
            label="专业ID"
            :rules="[
              { required: true, message: '请输入专业ID', trigger: 'blur' },
            ]"
          >
            <el-input v-model="updateObj.majorId"></el-input>
          </el-form-item>
          <el-form-item
            prop="classId"
            label="班级ID"
            :rules="[
              { required: true, message: '请输入班级ID', trigger: 'blur' },
            ]"
          >
            <el-input v-model="updateObj.classId"></el-input>
          </el-form-item>
          <el-form-item
            prop="studentPassword"
            label="登陆密码"
            :rules="[
              { required: true, message: '请输入登录密码', trigger: 'blur' },
            ]"
          >
            <el-input v-model="updateObj.studentPassword"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="updateDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateStudent">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 饼状图 -->
    <div class="content-inner chart-style" ref="chart"></div>
  </div>
</template>

<script>
import {
  deleteStudent,
  insertStudent,
  pageList,
  updateStudent,
} from "@/api/student-api";
export default {
  data() {
    return {
      searchBody: {
        majorName: "",
        className: "",
      },
      total: 0,
      tableData: [],
      dialogFormVisible: false,
      studentAddBody: {
        studentId: "",
        studentName: "",
        majorId: "",
        classId: "",
        studentPassword: "",
      },
      updateDialogFormVisible: false,
      updateObj: {},
    };
  },
  methods: {
    getStudentList() {
      pageList(this.searchBody).then((res) => {
        if (res.data.code == 200) {
          console.log(res);
          this.tableData = res.data.data.records;
          // console.log(this.tableData)
          this.total = res.data.data.total;
        }
      });
    },
    addStudent() {
      insertStudent(this.studentAddBody).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.dialogFormVisible = false;
          this.getStudentList();
        } else {
          this.$alert(res.data.msg, "添加失败", {
            confirmButtonText: "确定",
          });
        }
      });
    },
    delStudent(row) {
      // console.log(index, row);
      this.$confirm("是否删除此条学生信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteStudent(row.id).then((res) => {
            console.log(res);
            if (res.data.code === 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              // 重新加载列表
              this.searchBody.pageNum = 1;
              this.getStudentList();
            } else {
              this.$alert(res.data.msg, "删除失败", {
                confirmButtonText: "确定",
              });
            }
          });
        })
        .catch(() => {});
    },
    openUpdateStudent(student) {
      this.updateObj = student;
      this.updateDialogFormVisible = true;
    },
    updateStudent() {
      // 获取用户输入
      this.$refs.studentUpdateRef
        .validate()
        .then(() => {
          // 代表表单校验通过了，可以发送请求了
          updateStudent(this.updateObj).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: "新增成功",
                type: "success",
              });
              this.updateDialogFormVisible = false;
              this.getStudentList();
            } else {
              this.$alert(res.data.msg, "失败", {
                confirmButtonText: "确定",
              });
            }
          });
        })
        .catch((err) => {
          // 校验失败，不能应该给用户提示
          console.log(err);
        });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      pageList(this.searchBody, val, this.searchBody.pageSize).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.records;
        }
      });
    },
  },
  // searchStudents() {
  //   // 调用pageList方法传递包含专业名称的searchBody对象进行查询
  //   pageList({ ...this.searchBody }).then((res) => {
  //     if (res.data.code == 200) {
  //       this.tableData = res.data.data.records;
  //       this.total = res.data.data.total;
  //     }
  //   });
  // },
  mounted() {
    this.getStudentList();
  },
};
</script>

<style>
.table {
  margin-top: 10px;
}
.searchBody {
  margin-top: 50px;
  margin-left: 20px;
}
.searchBody .btn {
  padding-top: 9px;
}
.page {
  margin-top: 20px;
  margin-right: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>